<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <br />
    <nav>
      <select name="provinceCode" v-on:change="getCities($event)">
        <option
          v-for="province of provinces"
          v-bind:key="province.id"
          v-bind:value="province.code"
        >{{province.name}}</option>
        <option value="00" selected>请选择省份</option>
      </select>
      <select name="cityCode">
        <option
          v-for="(city,index) of cities"
          v-bind:key="index"
          v-bind:value="city.code"
        >{{city.name}}</option>
        <option value="0000" selected>请选择城市</option>
      </select>
    </nav>
  </div>
</template>

<script>
export default {
  name: "HelloWorld", //标识
  props: {
    msg: {
      type: String,
      default: "只有默认信息"
    },
    list:Array
  },
  created() {
    this.provinceInit();
  },
  data() {
    return {
      provinces: [],
      cities: [],
    };
  },
  methods: {
    provinceInit() {
      this.$axios
        .get(`/ad/getProvince`)
        .then(response => {
          if (response.data.result == "ok") {
            this.provinces = response.data.provinces;
          }
        });
    },
    getCities(event) {
      let currentProvinceCode = event.target.value;
      this.$axios
        .get(`/ad/getCity/${currentProvinceCode}`)
        .then(response => {
          this.cities = response.data.cities;
        });
    }
  }
};
</script>

<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
a {
  color: #42b983;
}
</style>
